<template>
	<div>
		<Head />
		<!-- 下拉菜单 -->
		<view class="item">
			<HMfilterDropdown :menuTop="70" :filterData="filterData" :defaultSelected="defaultSelected" :confirm="confirm"
			 :updateMenuName="true" dataFormat="Object"></HMfilterDropdown>
		</view>
		<view class="talents-content" id="demo1" v-for="(ele,index) in talentslist" :key='index'>
			<view class="site-content-first" @click="goDetail(ele)">
				<view class="site-content-first-img">
					<image :src="ele.picUrl" mode="" class="son" />
				</view>
				<view class="site-content-first-top">{{ele.name}}</view>
				<view class="site-content-first-mid">{{ele.exprience}}</view>
				<view class="talents-content-desc">"{{ele.desc}}</view>
				<view class="site-content-first-bottom">{{ele.money}}</view>
			</view>
		</view>
	</div>
</template>
<script>
	import {
		mapMutations
	} from 'vuex'
	import Head from '../Home/head.vue';
	import HMfilterDropdown from '../../components/HM-filterDropdown/HM-filterDropdown.vue';
	import data from '../../common/person.js'; //筛选菜单数据
	export default {
		components: {
			Head,
			'HMfilterDropdown': HMfilterDropdown
		},
		data() {
			return {
				indexArr: '',
				valueArr: '',
				defaultSelected: [],
				filterData: [],
				datalist: [],
				talentslist: [{
						"id": "1001",
						"name": "张三",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "时光静好",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-08/07/08/202008070814078151-239867.jpg",

					},
					{
						"id": "1002",
						"name": "李四",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "小鸟依人呆萌小妹子",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-08/07/12/20200807125033871-6447446.jpg",
					},
					{
						"id": "1003",
						"name": "王五",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "荷衣清风",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-07/30/07/202007300727546961-239867.jpg",
					},
					{
						"id": "1004",
						"name": "开心的马骝",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "稻香弥漫盛夏时光",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-07/31/08/20200731081704781-239867.jpg",
					},
					{
						"id": "1005",
						"name": "小阿七",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "名典时尚",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-08/01/09/20200801092726731-239867.jpg",
					},
					{
						"id": "1006",
						"name": "美娜",
						"exprience": "工作经验：3年",
						"money": "12000元/月",
						"desc": "90后清纯女神",
						"email": "45616756@126.com",
						"details": "我性格开朗、思维活跃;拥有年轻人的朝气蓬勃,做事有责任心,条理性强;易与人相处,对工作充满热情,勤奋好学,敢挑重担,具有很强的团队精神和协调能力。在为人方面,我诚实善良、开朗自信,能够吃苦。在生活中,我尊敬他人,能够和别人友好相处,现在我唯一的不足就是应届毕业,还没有足够的工作经验。",
						"picUrl": "http://image.hnol.net/c/2020-07/30/10/0ed9f6c33f575783e7fe899cd6bc67b1-6072437.jpg",
					}
				],
			}
		},
		onLoad: function() {
			//定时器模拟ajax异步请求数据
			setTimeout(() => {
				// console.log(data)
				this.filterData = data;
			}, 100);
			// 模拟ajax请求子菜单数据。
			setTimeout(() => {
				this.filterData[0].submenu[0].submenu = [{
					"name": "不限",
					"value": "不限"
				}, {
					"name": "朝阳区",
					"value": "朝阳区"
				}, {
					"name": "东城区",
					"value": "东城区"
				}, {
					"name": "通州区",
					"value": "通州区"
				}, {
					"name": "西城区",
					"value": "西城区"
				}];
			}, 1000)
		},



		// let talentslist = await this.$api.json('talentslist');

		methods: {
			// 引入vuex
			...mapMutations(['talentsmutations']),
			// 接收菜单结果
			confirm(e) {
				this.indexArr = e.index;
				this.valueArr = e.value;
			},
			//修改选中项-示例
			changeSelected() {
				this.defaultSelected = [];
				this.$nextTick(() => {
					this.defaultSelected = [
						[1, 1, 0], //第0个菜单选中 一级菜单的第1项，二级菜单的第1项，三级菜单的第3项
						[null, null], //第1个菜单选中 都不选中
						[1], //第2个菜单选中 一级菜单的第1项
						[
							[0],
							[1, 2, 7],
							[1, 0]
						], //筛选菜单选中 第一个筛选的第0项，第二个筛选的第1,2,7项，第三个筛选的第1,0项
						[
							[0],
							[1],
							[1]
						] //单选菜单选中 第一个筛选的第0项，第二个筛选的第1项，第三个筛选的第1项
					];
				})
			},
			goDetail: function(e) {
				let detail = {
					author_name: e.name,
					cover: e.picUrl,
					id: e.id,
					published_at: e.desc,
					title: e.name,
					details: e.details
				};
				uni.navigateTo({
					url: 'details?detailDate=' + JSON.stringify(detail)
				});
			},
		},
	}
</script>

<style scoped lang="less">
	.item {
		left: 0px;
		width: 375px;
		height: 44px;
		text-align: center;
		border-top border-bottom: 1px solid #999999;
	}

	.talents-content {
		margin-top: 22px;
		// background-color: yellow;
		text-align: center;

		.site-content-first {
			border-bottom: 1px solid #999999;
			position: relative;
			display: flex;
			width: 100%;
			height: 138px;

			.site-content-first-img {
				position: absolute;
				margin-left: 11px;
				margin-top: 13px;
				width: 100px;
				height: 113px;
				border-radius: 6px;
				background-color: #0044CC;

				.son {
					width: 100px;
					height: 113px;
				}
			}

			.site-content-first-top {
				position: absolute;
				margin-top: 22px;
				margin-left: 127px;
				width: 200px;
				height: 40px;
				line-height: 20px;
				color: rgba(16, 16, 16, 1);
				font-size: 18px;
				text-align: left;
				font-family: Arial;
			}

			.site-content-first-mid {
				position: absolute;
				margin-top: 50px;
				margin-left: 118px;
				width: 100px;
				height: 23px;
				line-height: 17px;
				color: rgba(153, 153, 153, 1);
				font-size: 12px;
				text-align: center;
				font-family: Arial;
			}

			.talents-content-desc {
				position: absolute;
				margin-top: 103px;
				margin-left: 127px;
				// width:300px;
				color: rgba(153, 153, 153, 1);
				height: 23px;
				line-height: 23px;
				font-size: 16px;
				font-family: Arial;
			}

			.site-content-first-bottom {
				position: absolute;
				margin-top: 83px;
				margin-left: 127px;
				width: 72px;
				height: 23px;
				line-height: 20px;
				color: rgba(255, 68, 68, 1);
				font-size: 14px;
				text-align: center;
				font-family: Arial;
			}
		}
	}
</style>
